<template name="headTitle">
	<view class="title-contents">
		<!-- :style="{background:statusColor}" -->
		<view class="top-view status" ></view>
		<view class="top-view titles flex_row">
            <view class="titleLeftButton flex_col" @click="backButton" v-if="showLeftButton"><image src="../../static/backIcon.png" mode=""></image></view>
            <view class="titleText">{{titleText}}</view>
            <!-- <view class="titleRightButton" @click="rightButton" v-if="showRightButton"></view> -->
        </view>
	</view>
</template>

<script>
	export default {
		name:"headTitle",
		props:{
			titleText:{
                type:String,
                default:""
            },
            statusColor:{
                type:String,
                default:""
            },
            showLeftButton:{
                type:Boolean,
                default:false
            },
            showRightButton:{
                type:Boolean,
                default:false
            }
		},
		data(){
			
		},
		methods:{
			backButton:function(){
				uni.navigateBack({
					
				})
			}
		},
	}
</script>

<style scoped>
	.title-contents{
		height: calc(var(--status-bar-height) + 88px);
		color: #fff;
		font-size: 36px;
		font-family: '黑体';
	}
	.status{
		height: var(--status-bar-height);
	}
	.titles{
		height: 88px;
		line-height: 88px;
		text-align: center;  
		position: relative;
	}
	.top-view{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		background: linear-gradient(to right,#AE33F6,#6673FF);
	}
	.titles{
		top: var(--status-bar-height);
		justify-content: center;
	}
	.titleText{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 7em;
	}
	.titleLeftButton{
		padding: 0 30px;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0;
		font-size: 30px;
		justify-content: center;
	}
	.titleLeftButton image{
		width: 46px;
		height: 46px;
	}
</style>
